<template>
		<div ref="fullscreenElement">
			 <div class="header">
				 <h3>{{examName}}-{{examInfo.coursesName}}</h3>
				 <span>模板管理</span>
				 <p>
					 <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
					 <em @click="$router.push('/examoverview')">退出</em>
				 </p>
			 </div>
			 <div class="tabNav">
				 <div class="searchlist">
				 	<router-link to="/templateinformation" active-class="hover">模板信息及上传</router-link>
				 	<router-link to="/horizontalpositioning" active-class="hover">水平定位</router-link>
				 	<router-link to="/locationarea" active-class="hover">定位区</router-link>
				 	<router-link to="/admissionticketnumberarea" active-class="hover">准考证号区</router-link>
				 	<router-link to="/objectivequestionarea" active-class="hover">客观题区</router-link>
				 	<router-link to="/subjectivequestions" active-class="hover">主观题区</router-link>
				 </div>
				 <span>复用其他考试模板</span>
			 </div>
			 <div class="canvalBox">
			   <div ref="container" class="image-container">
			     <img ref="image" :src="currentImage.imageUrl" alt="Image" />
			   </div>
			   <div @click="prevImage" class="prevImage" :disabled="currentIndex === 0">
			     <img src="../../assets/image/school/leftsj.png">
			   </div>
			   <div @click="nextImage" class="nextImage" :disabled="currentIndex === imageUrllist.length - 1">
			     <img src="../../assets/image/school/rightsj.png">
			   </div>
			   <div class="cardattention">
			     请根据网格调整答题卡，以保证<em>每页答题卡</em>的水平位置
			   </div>
			   <div class="cardattention1">
			     试卷页数：{{ currentIndex + 1 }}页（{{ currentIndex + 1 }}/{{ imageUrllist.length }}）
			   </div>
			   <div class="routate">
			     旋转:
			     <el-select v-model="rotate" placeholder="请选择">
			       <el-option
			         v-for="item in options"
			         :key="item.id"
			         :label="item.value"
			         :value="item.id"
			       ></el-option>
			     </el-select>
				 &nbsp;&nbsp;
			     度数:
			     <el-input v-model="rotateDeg" clearable></el-input>
			     <el-button type="primary" @click="saveRotate">保存</el-button>
			   </div>
			 </div>
			 <!-- <div>
				 <div>
					 <vueCropper :imageUrllist="modelobj.templateImages" @updataimage="updataimage"></vueCropper>
				 </div>
			 </div> -->
		</div>
</template>

<script>
// import ImageSelector from '../../components/school/imgcj.vue';
// import ImageSelector from '../../components/school/imagecanvas.vue'
// import vueCropper from '../../components/school/vuecropper.vue'
import { get, post, del, put } from '../../request/api.js'
import panzoom from 'panzoom';
export default {
  name: 'App',
  data(){
	return{
		navbar:[
			{
				name:'模板信息及上传',
				id:0,
			},
			{
				name:'水平定位',
				id:1,
			},
			{
				name:'定位区',
				id:2,
			},
			{
				name:'准考证号区',
				id:3,
			},
			{
				name:'客观题区',
				id:4,
			},
			{
				name:'主观题区',
				id:5,
			}
		],
		tabnavindex:0,
		examclassify:'',
		examclassifylist:['条形码','涂点','手写'],
		examNumber:'',
		examNumberlist:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
		cardNumber:2,
		cardNumberlist:[2,4,6],
		cardColor:'',
		cardColorlist:['黑色','灰色','彩色'],
		examdpi:'',
		examdpilist:[150,200,300],
		images: [],
		questiontype:'',
		questionList:[
			{
				name:'定位点',
				id:1
			},
			{
				name:'文字定位',
				id:2
			}
		],
		
		selectradio:1,
		fillinWidth:0,
		fillinHeight:0,
		intervalWidth:0,
		intervalHeight:0,
		modelobj:{
		  id:0,
		  examId:0,
		  examCourseId:0,
		  examNoLength:4,
		  answerCardPages:2,
		  status:0,
		  templateImages: []
		},
		moduleImageurl:{},
		templateId:'',//模板id
		examCourseId:'',//考试科目id
		modeldata:{
			templateId: 0,
			examCourseId: 0,
			type: 0
		},
		positioningare:{
			id: 0,
			templateId: 0,
			templateAreaType: 0,
			templateCuttingRegion:[]
		},
		modeltypequestion:'',
		modelarealist:[],
		modelarealistcavans:[],
		examName:'',
		examInfo:{},
		options: [
		  { value: '顺时针', id: 1 },
		  { value: '逆时针', id: 2 },
		],
		rotate: 1,
		rotateDeg: 0,
		currentIndex: 0,
		currentImage: '',
		imageUrllist:[],
		panzoomInstance: null,
		isFullscreen: false, // 当前是否处于全屏状态
	}  
  },
  mounted() {
	  // 监听全屏状态变化
	  document.onfullscreenchange = this.handleFullscreenChange;
	this.examInfo = JSON.parse(sessionStorage.getItem('examInfo'))
	this.examName = sessionStorage.getItem('examName')
	this.examCourseId = this.examInfo.id
	this.modeltab()
	this.initPanzoom()
  },
  methods:{
	  updataimage(){
		  this.modeltab()
	  },
	// 获取模板
	modeltab(){
		const url =  `/template/examcourse/${this.examInfo.id}`;
		get(url)
		.then(res => {
			if(res.code==200){
				this.modelobj = res.data
				this.imageUrllist = res.data.templateImages
				this.currentImage = res.data.templateImages[this.currentIndex]
				// this.moduleImageurl = res.data
				// this.modelobj.examNoLength = res.data.examNoLength
				// this.modelobj.answerCardPages = res.data.answerCardPages
			}
			// else{
			// 	this.$message.error(res.message); 
			// }
		})
		.catch(error => {
			 this.$message.error(error.message); 
		});
	},
	// 取消模板
	modeluploadcancel(){
		
	},
	zdsbmodel(){
		
	},
	saveRotate() {
	  const rorateobj = {
	    id: this.imageUrllist[this.currentIndex].id,
	    rotate: this.rotate === 1 ? Number(this.rotateDeg) : Number(-this.rotateDeg),
	  };
	  post('/template/rotate', rorateobj)
	    .then(() => {
	      this.$emit('updataimage');
	    })
	    .catch((error) => {
	      console.error(error);
	    });
	},
	prevImage() {
	  if (this.currentIndex > 0) {
	    this.currentIndex--;
	    this.currentImage = this.imageUrllist[this.currentIndex];
	  }
	},
	nextImage() {
	  if (this.currentIndex < this.imageUrllist.length - 1) {
	    this.currentIndex++;
	    this.currentImage = this.imageUrllist[this.currentIndex];
	  }
	},
	initPanzoom() {
	      const container = this.$refs.container;
	      const image = this.$refs.image;
	
	      this.panzoomInstance = panzoom(image, {
	        bounds: true, // 限制在容器内
	        boundsPadding: 0.1, // 边界留白
	        maxZoom:5, // 最大缩放比例
	        minZoom:0.8, // 最小缩放比例
	        onZoom: this.handleZoom, // 缩放事件回调
	        onPan: this.handlePan, // 拖拽事件回调
			transformOrigin: {x: 0.5, y: 0.5}
	      });
	    },
		
	    handleZoom(event, transform) {
	      // 动态调整边界限制
	      const containerRect = this.$refs.container.getBoundingClientRect();
	      const imageRect = this.$refs.image.getBoundingClientRect();
	
	      // if (transform.scale < 1) {
	      //   this.panzoomInstance.setOptions({
	      //     bounds: false, // 取消边界限制
	      //   });
	      // } else {
	      //   this.panzoomInstance.setOptions({
	      //     bounds: true, // 恢复边界限制
	      //   });
	      // }
	    },
	    handlePan(event, transform) {
				  container.style.cursor = 'crosshair'
	      // 处理拖拽事件
	      //console.log('Pan:', transform.x, transform.y);
	    },
		// 切换全屏
		toggleFullscreen() {
		  if (!document.fullscreenEnabled) {
		    alert("您的浏览器不支持全屏功能！");
		    return;
		  }
		
		  if (this.isFullscreen) {
		    // 退出全屏
		    document.exitFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  } else {
		    // 进入全屏
		    this.$refs.fullscreenElement.requestFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  }
		},
		// 处理全屏状态变化
		handleFullscreenChange() {
		  this.isFullscreen = !!document.fullscreenElement;
		}
  },
  components: {
    // vueCropper
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 102px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 102px);
	background:#fff;
	position:relative
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 102px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 102px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 102px);
	overflow:scroll;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .image-preview img{
	  box-sizing: border-box;
	  width: 150px;
	  height: 150px;
	  background: #FFFFFF;
	  border-radius: 10px;
	  text-align: center;
	  font-size:16px;
	  color:#295CFF;
	  cursor: pointer;
	  margin:22px;
  }
  .searchlist{
  	box-sizing: border-box;
  	width:auto;padding:0 40px;
  	display: flex;
  	justify-content: space-between;
  	height: 54px;
  	background: #FFFFFF;
  	border-radius: 10px;
  	padding:0 24px;
  	align-items: center;
  }
  .searchlist{
  	padding-left:20px;
  	display: flex;
  	align-items: center;
  	justify-content: left;
  }
  .searchlist a{
  	display: block;
  	color:#557292;
  	font-size:14px;
  	/* width:100px; */
  	text-align: center;
  	position: relative;
  	line-height:52px;
  	padding:0 15px;	
  }
  .searchlist a:hover,.searchlist a.hover{
  	color:#295CFF;
  }
  .searchlist a:hover::after,.searchlist a.hover::after{
  	content:'';
  	width: 24px;
  	height: 4px;
  	background: #295CFF;
  	border-radius: 2px;
  	position: absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:0;
  }
  .image-container {
    width:100vw;
    height:calc(100vh - 104px);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-container img {
    max-width: 80%; /* 图片宽度不超过容器 */
    max-height:80%; /* 图片高度不超过容器 */
  }
  .canvalBox{
  	box-sizing: border-box;
  	width:100vw;
  	height:calc(100vh - 102px);
  	position: relative;
	background:url('../../assets/image/school/boxmd.jpg');
  }
  .canvasbox{
  	position: absolute;
  }
  .cropper-container {
  	box-sizing: border-box;
   width:100vw;
   height:calc(100vh - 102px); /* 或者具体的像素值 */
    overflow: hidden; /* 防止图片超出容器 */
  }
  .cardattention{
  	position:absolute;
  	left:50%;
  	transform: translateX(-50%);
  	top:20px;
  	font-size:16px;
  	color:#5B6371;
  }
  .cardattention em{
  	font-style:normal;
  	color:red;
  }
  .cardattention1{
  	position:absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:20px;
  	font-size:16px;
  	color:#5B6371;
  }
  .routate{
  	position:absolute;
  	left:50px;
  	top:0px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px;
  	box-shadow: 0 0 10px rgba(0,0,0,0.4);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
  	z-index:1111
  }
  .routate >>> .el-select,.routate >>> .el-input{
  	width:100px;
  }
  .routate >>> .el-select{
  	margin-right:10px;
  	margin-left:0px;
  }
 .routate >>> .el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
  .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:0;
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .prevImage,.nextImage{
  	width:54px;
  	height:54px;
  	position:absolute;
  	top:50%;
  	transform: translateY(-50%);
  	cursor: pointer;
  }
  .prevImage img,.nextImage img{
  	width:100%;
  	height:auto;
  }
  .prevImage{
  	left:100px;
  }
  .nextImage{
  	right:100px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
</style>